import React, { Component } from 'react'
import { NavLink } from "react-router-dom"
import navFont from "./navFoot.module.css"

import homeImg from '../../images/home.png'
import sortImg from '../../images/sort.png'
import shopImg from '../../images/shop.png'
import mineImg from '../../images/mine.png'
import homeImgR from '../../images/rhome.png'
import sortImgR from '../../images/rsort.png'
import shopImgR from '../../images/rshop.png'
import mineImgR from '../../images/rmine.png'

export default class componentName extends Component {
    render() {
        // console.log(this.props)
        let pathname = this.props.prop

        return (
            <div>
                <div className={navFont.footer}>
                    <div className={navFont.foot}>
                        <NavLink exact to="/" activeClassName={navFont.red} ref="abc">
                            <img src={pathname==='/'? homeImgR:homeImg} alt=""/>
                            优市
                        </NavLink>
                    </div> 
                    
                    <div className={navFont.foot}>
                        <NavLink exact to="/sort" activeClassName={navFont.red}>
                            <img src={pathname==='/sort'? sortImgR:sortImg} alt=""/>
                            分类
                        </NavLink>
                    </div>    
                    
                    <div className={navFont.foot}>
                        <NavLink exact to="/shop" activeClassName={navFont.red}>
                            <img src={pathname==='/shop'? shopImgR:shopImg} alt=""/>
                            购物车 
                        </NavLink>
                    </div>   
                    
                    <div className={navFont.foot}>
                        <NavLink exact to="/mine" activeClassName={navFont.red}>
                            <img src={pathname==='/mine'? mineImgR:mineImg} alt=""/>
                            个人
                        </NavLink>
                    </div>    
                </div>
            </div>
        )
    }
}
